<template>
  <div v-cloak>
    <div class="panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">菜品留言板</h2>
      </div>
      <div class="hhh">

<!--        <label>-->
<!--          请输入留言内容:-->
<!--          <input type="text" class="form-lan" v-model="name"  placeholder="请输入......">-->
<!--        </label>-->

        <label>
          <div class="text-area">
      <textarea placeholder="请输入对我们店的菜菜想说的话......" v-model="name"></textarea>
          </div>
        </label><br>

        <input type="button" value="提交留言内容" class="btnnn" @click="add();addNumber()">
        <label class="form-search">
          根据关键字查找留言：
          <input type="text"  v-model="keywords">
        </label>
      </div>
    </div>
    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>留言内容</th>
        <th>留言时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(list,index) in search(keywords)" >
        <td>第{{list.id}}条</td>
        <td v-text="list.name"></td>
        <td>{{dateFormat(newDate)}}</td>
        <td>
          <button @click="deleteItem(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <span>总留言条数：{{totalPrice}}</span>
  </div>
</template>

<script>
  export default {
      name: 'MessageBoard',
      data() {
        return {
          id: 4,
          name: '',
          keywords: '', // 搜索的关键字
          newDate: new Date(),
          lists: [
            {id: 1,name: '钵钵鸡真好吃',newDate: '2022年10月30日 星期日'},
            {id: 2,name: '剁椒鱼头不够辣，我要是能辣死我的辣',newDate:'2022年11月16日 星期三' },
            {id: 3,name: '吃了臭豆腐，脑袋也不晕了，心脏也不跳了，好极了！',newDate:'2022年12月1日 星期四' }
          ]
        }
      },
      methods: {
        itemPrice(price, count){
          return price * count;
        },
        deleteItem(index){
          this.lists.splice(index, 1);
        },
        addNumber (){
          this.id = this.id+1;
        },
        add() { // 添加的方法
          let goods = { id: this.id, name: this.name, price: this.price,count: this.count }
          this.lists.push(goods)
          this.name = ''
        },
        search(keywords) { // 根据关键字，进行数据的搜索
          /* */
          let newList = []
          this.lists.forEach(item => {
            if (item.name.indexOf(keywords) != -1) {
              newList.push(item)
            }
          })
          return newList
        },
        dateFormat () {
          var date = new Date()
          var year = date.getFullYear()
          var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
          var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          let week = date.getDay() // 星期
          let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
          // 拼接 时间格式处理
          return year + '年' + month + '月' + day + '日 '+ weekArr[week]
        },
  },
computed:{
  totalPrice(){
    let total = 0;
    for (let list of this.lists) {
      total = total + 1
    }
    return total;
  }
},
}

</script>

<style scoped>
    body {
      width: 1000px;
    }
    table {
      margin-top: 30px;
      border: 1px solid black;
      width: 100%;
    }
    span {
      float: right;
    }
    [v-cloak] {
      display: none;
    }
    th {
      height: 50px;
    }
    th,td {
      border-bottom: 1px solid #ddd;
      text-align: center;
    }
    .panel-title {
      text-align: left;
    }
    .form-search {
      float: right;
    }
    .text-area{
      width: 100%;
      border-top:1px solid #070707;
      border-bottom:1px solid #060606;
    }
    .text-area textarea {
      width: 100%;
      margin: 0.75rem  0;
      border: none;
      outline: none;
      padding-left: 1.125rem;
      height: 6.5rem ;
    }

    .text-area textarea::-webkit-input-placeholder {
      color: #f80303;
    }
</style>
